<!--标记语言-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="这是一个神奇的网站">
    <meta name="keywords" content="汔车,女生,管理系统">
    <title>我们的网站</title>
</head>
<body>

<form method="post">
    <div>
        <input type="text" name="account" placeholder="请输入用户名" />
    </div>
    <div>
        <input type="password" name="password" placeholder="请输入密码" />
    </div>
    <div>
<!--        这个键钮直接提交吗-->
<!--        <input type="submit" value="登录" />-->


<!--        button也可以提交-->
<!--        javascript : js-->
        <input type="button" id="aa" onclick="mySubmit()" value="登录">
    </div>
</form>
</body>
<!--脚 本语言-->
<script>
    /**
     * let : 局部变量
     * var : 全局变量
     * const :  常量
     */
    function mySubmit(){
        //点我以后 我要判断用户名或者密码是否为空
        // javascript  :
        // window
        // document  location event
        let username = document.getElementsByName("account")[0].value;
        if(username === ""){
            alert('用户名不能为空')
            return;
        }

        let password = document.getElementsByName("password")[0].value;
        if(password === ""){
            alert('密码不能为空')
            return;
        }

        //ajax 原生ajax --》 让js 页面 可以与后台交互  异步通信

        //1 : 创建核心对象
        let req = new XMLHttpRequest();
        //2 : 打开通道
        req.open("post","/user/login?account="+username+"&password="+password);
        //4 : 后台交互 [ajax readyState 0 1 2 3 4(交互完成) ]
        req.onreadystatechange = function () {
            if(req.readyState === 4){
                //浏览器的状态码
                if(req.status === 200){
                    //成功
                    let data = JSON.parse(req.responseText);
                    if(data.code === 200){
                        alert("欢迎"+data.data.name+"-"+data.msg)
                        //跳转页面
                        location.href = "/welcome.html"
                    }else{
                        alert(data.msg)
                    }
                }else{
                    //失败
                    alert("登录失败")
                }
            }
        }
        //3 : 发起请求
        req.send();

        //根据后台返回的信息 200 500

        //200 去新的页面

        //500 提示
    }
</script>
</html>